<m-notice [icon]="'flaticon-exclamation m--font-primary'">
	For more info please check the components's official demos & documentation 
	<a class="m-link" href="https://ng-bootstrap.github.io/#/components/rating/examples" target="_blank">demos & documentation</a>
</m-notice>

<div class="row">
	<div class="col-xl-6">
		<m-material-preview [viewItem]="exampleBasicDemo">
			<div class="m-section">
				<div class="m-section__content">
					<ngb-rating [(rate)]="currentRate"></ngb-rating>
					<div class="m-separator m-separator--dashed"></div>
					<pre>Rate: <b>{{currentRate}}</b></pre>
				</div>
			</div>
		</m-material-preview>

		<m-material-preview [viewItem]="exampleEventsAndReadonlyRatings">
			<div class="m-section">
				<div class="m-section__content">
					<pre>Selected: <b>{{selected}}</b></pre>
					<pre>Hovered: <b>{{hovered}}</b></pre>
					<ngb-rating [(rate)]="selected" (hover)="hovered=$event" (leave)="hovered=0" [readonly]="readonly"></ngb-rating>
				</div>
			</div>
			<div class="m-separator m-separator--dashed"></div>
			<div class="m-section">
				<div class="m-section__content">
					<button class="btn btn-sm btn-{{readonly ? 'danger' : 'success'}}" (click)="readonly = !readonly">
						{{ readonly ? "readonly" : "editable"}}
					</button>
				</div>
			</div>
		</m-material-preview>

		<m-material-preview [viewItem]="exampleCustomStarTemplate">
			<div class="m-section">
				<span class="m-section__sub">
					Custom rating template provided as child element
				</span>
				<div class="m-section__content">
					<ngb-rating [(rate)]="currentRate1">
						<ng-template let-fill="fill" let-index="index">
							<span class="star" [class.filled]="fill === 100" [class.bad]="index < 3">&#9733;</span>
						</ng-template>
					</ngb-rating>
				</div>
			</div>
			<div class="m-separator m-separator--dashed"></div>

			<div class="m-section">
				<div class="m-section__content">
					<pre>Rate: <b>{{currentRate1}}</b></pre>
				</div>
			</div>
		</m-material-preview>
	</div>
	<div class="col-xl-6">
		<m-material-preview [viewItem]="exampleCustomDecimalRating">
			<div class="m-section">
				<span class="m-section__sub">
					Custom rating template provided via a variable. Shows fine-grained rating display
				</span>
				<div class="m-section__content">
					<ng-template #t let-fill="fill">
						<span class="star2" [class.full]="fill === 100">
							<span class="half" [style.width.%]="fill">&hearts;</span>&hearts;
						</span>
					</ng-template>

					<ngb-rating [(rate)]="currentRate2" [starTemplate]="t" [readonly]="true" max="5"></ngb-rating>
				</div>
			</div>
			<div class="m-separator m-separator--dashed"></div>
			<div class="m-section">
				<div class="m-section__content">
					<pre>Rate: <b>{{currentRate2}}</b></pre>
					<button class="btn btn-sm btn-primary" (click)="currentRate2 = 1.35">1.35</button>&nbsp;
					<button class="btn btn-sm btn-primary" (click)="currentRate2 = 4.72">4.72</button>
				</div>
			</div>
		</m-material-preview>

		<m-material-preview [viewItem]="exampleFormIntegration">
			<div class="m-section">
				<span class="m-section__sub">
					NgModel and reactive forms can be used without the 'rate' binding
				</span>
				<div class="m-section__content">
					<div class="form-group">
						<ngb-rating [formControl]="ctrl"></ngb-rating>
						<div class="form-text small">
							<div *ngIf="ctrl.valid" class="text-success">Thanks!</div>
							<div *ngIf="ctrl.invalid" class="text-danger">Please rate us</div>
						</div>
					</div>
				</div>
			</div>
			<div class="m-section">
				<span class="m-section__sub">
					Model:
					<b>{{ ctrl.value }}</b>
				</span>
				<div class="m-section__content">
					<button class="btn btn-sm btn-{{ ctrl.disabled ? 'danger' : 'success'}}" (click)="toggle()">
						{{ ctrl.disabled ? "control disabled" : " control enabled" }}
					</button>&nbsp;
					<button class="btn btn-sm btn-primary" (click)="ctrl.setValue(null)">Clear</button>
				</div>
			</div>
		</m-material-preview>

		<m-material-preview [viewItem]="exampleGlobalConfigurationOfRatings">
			<div class="m-section">
				<span class="m-section__sub">
					This rating uses customized default values.
				</span>
				<div class="m-section__content">
					<ngb-rating [rate]="3" max="5" [readonly]="true"></ngb-rating>
				</div>
			</div>
		</m-material-preview>
	</div>
</div>